<template>
  <div class="Movie">
    <section class="videos">
      <van-list v-model="loading" :finished="finished" @load="onLoad">
        <div class="video-item" v-for="(ele,i) in feedsList" :key="i">
          <div class="videoplayer" v-if="feedsList">
            <video v-if="ele.video" :src="ele.video.url" preload="none" muted="true"></video>
            <img v-if="ele.video" class="video-img" :src="ele.video.imgUrl" width="100%" alt />
            <div class="video-title">{{ele.title}}</div>
            <div class="play-but" @touchend="Play(ele)"></div>
            <div class="info-bar">
              <div v-if="ele.video" class="time">{{ele.video.dur | timer}}</div>
            </div>
          </div>
          <div class="video-info">
            <div class="info-l">
              <img :src="ele.user.avatarurl" height="30px" />
              <span>{{ele.user.nickName}}</span>
            </div>
            <div class="info-r">
              <div class="dianzan">
                <img src="../assets/dianzan.png" @touchend="UpCount(ele)" width="20px" alt />
                <p>{{ele.upCount}}</p>
              </div>
              <div class="pinglun">
                <img src="../assets/pinglun.png" width="20px" alt />
                <p>0</p>
              </div>
              <div class="fenxiang">
                <img src="../assets/fenxiang.png" width="20px" alt />
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </section>
  </div>
</template>
<script>
export default {
  name: "Movie",
  data() {
    return {
      Up: false,
      Content: false,
      feedsList: [],
      videoList: [],
      offset: 0,
      loading: false,
      finished: false
    };
  },
  filters: {
    Timer(e) {
      var min = Math.floor(e / 60) % 60;
      var sec = e % 60;
      return (
        (min >= 10 ? min : "0" + min) + ":" + (sec >= 10 ? sec : "0" + sec)
      );
    }
  },
  methods: {
    GetVideo() {
      this.axios({
        method: "get",
        url: "video/" + this.offset
      }).then(ref => {
        this.feedsList.push(...ref.data.data.feeds);
      });
    },
    onLoad() {
      if (this.offset <= 10) {
        this.loading = false;
        this.GetVideo();
        this.offset += 10;
      } else {
        this.loading = true;
        this.finished = true;
      }
    },
    Play(VideoID) {
      this.$router.push({
        name: "MovieVideo",
        params: { VideoID: JSON.stringify(VideoID) }
      });
    },
    UpCount(ele) {
      if (localStorage.getItem("Loginuser")) {
        if (this.Up) {
          ele.upCount--;
          this.Up = false;
        } else {
          ele.upCount++;
          this.Up = true;
        }
      } else {
        this.$router.push({ name: "My" });
      }
    }
  }
};
</script>
<style lang="less" scoped>
.video-item {
  .videoplayer {
    position: relative;
    height: 210px;
    overflow: hidden;
    background-color: #000;
    .video-img {
      position: absolute;
      top: 0;
      left: 0;
    }
    .video-title {
      position: absolute;
      top: 0;
      left: 0;
      font-family: PingFangSC-Medium, serif;
      font-size: 18px;
      color: #fff;
      letter-spacing: 0;
      line-height: 0.48rem;
      z-index: 1;
      margin: 0.18rem 0.3rem 0.38rem;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      word-wrap: break-word;
      word-break: break-all;
      overflow: hidden;
    }
    .play-but {
      z-index: 10;
      position: absolute;
      left: 50%;
      top: 50%;
      width: 1.16rem;
      height: 1.16rem;
      margin-left: -0.58rem;
      margin-top: -0.58rem;
      background-image: url(//s0.meituan.net/bs/myfe/canary/file/asgard/images/media/video-btn-play.png);
      background-size: contain;
    }
    .info-bar {
      position: absolute;
      left: 0;
      bottom: 0;
      right: 0;
      height: 30px;
      line-height: 30px;
      background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.5));
      color: #fff;
      font-size: 12px;
      .time {
        float: right;
        margin-right: 10px;
      }
    }
  }
  .video-info {
    overflow: hidden;
    padding: 10px 10px;
    background: rgb(255, 255, 255);
    .info-l {
      float: left;
      display: flex;
      align-items: center;
      height: 100%;
      margin-top: 5px;
      span {
        margin-left: 10px;
        line-height: 30px;
      }
    }
    .info-r {
      float: right;
      display: flex;
      align-items: center;
      height: 100%;
      .Up {
        color: #e4393c;
      }
      .dianzan {
        display: flex;
        align-items: center;
        margin-right: 50px;
        p {
          margin-left: 5px;
        }
      }
      .pinglun {
        display: flex;
        align-items: center;
        margin-right: 20px;
        p {
          margin-left: 5px;
        }
      }
    }
  }
}
</style>